<template>
  <div class="application-list flex justify-between" :class="'talk'+ type">
    <!-- 手机端头部 -->
    <zb-back to="/">
      <el-button v-if="curAI && curAI.type != 0" @click="talkFun(0)" link type="primary"><img src="@/assets/images/clear.png" class="clear-icon" alt=""></el-button>
      <el-button v-else @click="talkFun(1)" link type="primary"><img src="@/assets/images/history-icon.png" class="clear-icon" alt=""></el-button>
    </zb-back>
    
    
    <!-- 自定义 ~ 表单 -->
    <div class="ai-form-mid-box relative" :class="detail && detail.customstype == 3 ? 'baoma' : ''">
      <zb-ai-silder ref="aiSilderRef" :detail="detail" @chooseAI="chooseAI" :show="menuShow" /> <!-- 左边栏目 -->
      <zb-ai-form ref="aiFormRef" @submit="submit" :addresskey="addresskey">
        <template #top>
          <div v-if="detail && detail.customstype == 3" class="baoma-tabs">
            <span v-for="item in baomaTabs" :key="item.id" class="tab-item" :class="{on: baomaId === item.id}" @click="baomaIdFun(item.id)">{{item.name}}</span>
          </div>
        </template>
      </zb-ai-form>
    </div>
    <div v-if="detail" class="application-list-ri bg-white flex-1 rounded-[8px]">
      <div class="mx-auto max-content" :class="{big: baomaId == 2}">
        <!-- customstype 类型:1=普通应用,2=文字生成图片,3=宝妈, 4=对话 -->
        <zb-ai-result-prompt1 v-if="detail.customstype == 1 || baomaId === 1" ref="aiResultRef" :id="curAI.id" @loadingOk="aiFormRef.ok()" @loadingIng="aiFormRef.ing()" /><!-- prompt应用界面 -->
        <zb-ai-result-image v-if="detail.customstype == 2" ref="aiResultRef" @loadingOk="aiFormRef.ok()" /><!-- 文字生成图片 -->
        <zb-ai-result-job v-if="detail.customstype == 3 && baomaId == 2" ref="aiResultRef" @loadingOk="aiFormRef.ok()" :json="baomaJson" /><!-- 宝妈发布岗位 -->
        <!-- 多聊界面 -->
        <!-- <div v-else class="ai-talk-content flex justify-between">
          <div class="ai-talk-box flex-1">
            <zb-ai-talk @getTalk="getTalk" ref="aiTalkRef">
              <template #top>
                
              </template>
            </zb-ai-talk>
          </div>
          <zb-talk-history :show="historyShow" @close="historyShow = false"></zb-talk-history>
          
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  
  import { commonAssdetailApi, jobconfigApi } from '@/api/app';
  import { nextTick, onMounted, ref, shallowRef, computed} from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  const addresskey = computed(()=>{
    return baomaId.value == 1 ? 'name' : 'id'
  })
  const baomaIdFun = async (e:number) => {
    if(e === baomaId.value) return;
    baomaId.value = e;
    if(e === 2){
      aiFormRef.value?.initFormData({...detail.value, json: baomaJson.value, submit:'json'});
    }else{
      aiFormRef.value?.initFormData(detail.value);
    }
    await nextTick()
    aiResultRef.value?.initData(detail.value)
  }
  
  // 获取宝妈-发布岗位 or 图片生成的表单配置数据
  const getBaomaJson = async () => {
    await  jobconfigApi().then((res:any)=>{
      baomaJson.value = res.jobJson;
      imageJson.value = res.imageJson;
    })
  }
  // 宝妈操作
  const baomaId = ref(2);
  const baomaTabs = ref([
    {id:1, name:'灵活就业'},
    {id:2, name:'岗位发布'}
  ]);
  const baomaJson = ref()
  const imageJson = ref()
  
  const menuShow = ref(false);
  const menuShowFun = () => {
    menuShow.value = !menuShow.value
  }
  const type = ref(0); // 0- 多聊， 否则单聊
  const route = useRoute();
  const router = useRouter();
  const curId = ref(route.query.id ? Number(route.query.id) : 0);
  const pid = ref(route.query.pid ? Number(route.query.pid) : 0);
  
  // 对话相关操作 0 - 清除(重新创建)， 1-查看历史记录
  const historyShow = ref(false)
  const talkFun = (e:number) => {
    if( e === 0 ){
      aiResultRef.value?.clear()
    }else if( e === 1 ){
      historyShow.value = !historyShow.value
    }
  }
  const aiSilderRef = shallowRef(); // 侧边栏
  const aiFormRef = shallowRef(); // 提问表单
  const aiResultRef = shallowRef(); // 生成结果
  

  
  const detail = ref(); // 产品详情
  // 选择产品
  const curAI = ref();
  const chooseAI = async (id:number, parent_id:number, check:number = 0) => {
    menuShowFun();
    console.log('chooseAI----', id, curAI.value)
    if(curAI.value && curAI.value.id === id) return;
    aiResultRef.value?.clear();
    aiResultRef.value?.stopTalk();
    const res:any = await commonAssdetailApi({id});
    const _json = res.json ? res.json.map((m:any) => {return {...m, val: m.id == 4 ? [] : ''}}) : res.json;
    detail.value = {...res, json: _json}; // 查找该类型的表单数据
    if(!detail.value) return;
    curAI.value = res;
    type.value = detail.value.type;
    // console.log('选中的AI---detail', detail.value)
    // console.log('选中的AI---formData',  formData)
    await nextTick();
    if(check == 0){
      curId.value = id;
      pid.value = parent_id;
      router.push({
        path: '',
        query: {
          id: id,
          pid: parent_id
        }
      })
    }
    
    if(res.customstype == 3 && !baomaJson.value){
      getBaomaJson()
    }
    // 非对话的结果组件传值
    if(res.customstype == 2){
      await getBaomaJson();
      aiFormRef.value?.initFormData({...detail.value, json: imageJson.value, submit:'json'});
    }else if(res.customstype == 3){
      baomaIdFun(1)
    }else{
      aiFormRef.value?.initFormData(detail.value);
    }
    aiResultRef.value?.initData(detail.value)
  }
  chooseAI(curId.value, pid.value, 1)
  
  // 单聊 ------- start
  const submit = (e:any) =>{
    
    aiResultRef.value?.sendMsgFun(e.msg); // 发送消息
    
  }
  // 单聊 ------- end
  
  
  // 多聊 ------- end
  onMounted(() => {
    console.log('3--99999999---', curId.value)
  });


</script>
<style lang="scss" scoped>
$hvH: calc(var(--vh, 1vh) * 100);
.max-content.big{max-width: 1150px; width: 100%;}
.baoma-tabs{
  border-bottom: 1px solid #DCDFE6;display: flex; align-items: center; border-left: 1px solid #DCDFE6; margin:10px 0;
  .tab-item{
    width: 90px; height: 40px; display: flex; align-items: center; justify-content: center; border:1px solid #DCDFE6; position: relative;top: 1px; margin-left: -1px; cursor: pointer; font-size: 14px;
    &.on{ border-bottom-color: #fff; border-left: none; color: var(--el-color-primary);}
  }
}

.ai-form-mid-box{
  width:340px;border-right: 1px solid #E5E5E5; padding:0 14px;
  &.baoma{
    :deep(.ai-form-mid){
      .zb-form{height: calc($hvH - 120px);}
    }
  }
}
// 对话
.ai-form-talk{
  margin-right: 20px; 
  .el-textarea{height: calc(100% - 158px); margin-bottom: 20px;}
  :deep(.el-textarea__inner){
    box-shadow: none; background-color: #F7F7F8; width: calc(100% - 32px); margin: 0 auto;
    height: 100%;
  }
  :deep(.ai-form-title){margin: 0 0 20px;}
  .bottom-box{
    box-shadow: 0 0 6px #ededed; padding: var(--web-pad);
  }
}
  
.application-list{
  height:100%; width: 100%;
}
.w100,:deep(.w100){width:100%}
.application-list-ri{
  padding:20px;
  .ai-talk-box{
    height: calc($hvH - 130px); position: relative;
    :deep(.talk-content){height: 100%;}
    :deep(.bottom-box){
      display: none;
    }
  }
}
.ai-talk-content{
  background-color: #F7F7F8; align-items: stretch; height: calc($hvH - 130px); padding: var(--web-pad);
  :deep(.history-box){
    margin-left: var(--web-pad);
  }
}

@media only screen and (max-width: 769px){
  .baoma-tabs{
    border: none; width: 4rem; height: 0.72rem; justify-content: center; margin: 0 auto; background-color: #F7F7F7; border-radius: 0.24rem; overflow: hidden; margin-top: 0.1rem;
    .tab-item{
      border:none !important; border-radius: 0.24rem; width: 50%; font-size: 0.32rem; height: 100%;
      &.on{background-color: var(--el-color-primary); color: #fff;}
    }
  }
  .ai-form-mid-box{
    width: 0px; padding: 0; border: none;
    &.baoma{
      :deep(.ai-form-mid){
        .zb-form{height: calc($hvH - 80px - 1.6rem);}
      }
    }
  }
  .ai-form-talk{display: none;}
  .application-list-ri{
    border-radius:0px;padding: var(--wap-pad); padding-top: 0;
    .ai-talk-box{
      padding: 0; height: calc($hvH - 60px);  padding-bottom: 120px; padding-top: 0;
      :deep(.bottom-box){
        display: block;
      }
    }
  }
  .talk0{
    .application-list-ri{padding: 0;}
  }
  
  .ai-talk-content{background-color: transparent; padding: 0;}
  :deep(.zb-form){
    .el-scrollbar__wrap{
      padding: var(--wap-pad)
    }
  }
  :deep(.home-ri-top){
    padding: 0; margin:var(--wap-pad) 0;
  }
  
  :deep(.content){
    padding-bottom: 0;
  }
}

</style>